<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

import { getChannalChart } from "@/api/dashboard/statistical";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "600px",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      getChannalChart().then((response) => {
        // // 基于准备好的dom，初始化echarts实例
        // let chart = echarts.init(this.$el, 'macarons')

        // var option = {
        //   title: {
        //     text: "近7天渠道新增用户统计",
        //     left: "center",
        //   },
        //   tooltip: {
        //     trigger: "item",
        //     formatter: "{a} <br/>{b} : {c} ({d}%)",
        //   },
        //   legend: {
        //     orient: "vertical",
        //     left: "right",
        //     data: response.data.legendData,
        //   },
        //   series: [
        //     {
        //       name: "来源渠道",
        //       type: "pie",
        //       radius: "85%",
        //       center: ["50%", "60%"],
        //       data: response.data.seriesData,
        //       emphasis: {
        //         itemStyle: {
        //           shadowBlur: 10,
        //           shadowOffsetX: 0,
        //           shadowColor: "rgba(0, 0, 0, 0.5)",
        //         },
        //       },
        //       animationEasing: 'cubicInOut',
        //     },
        //   ],
        // };

        //  chart.setOption(option);

        this.chart = echarts.init(this.$el, "macarons");

        this.chart.setOption({
          title: {
            text: "近7天渠道新增用户统计",
            left: "center",
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            left: "center",
            bottom: "10",
            data: response.data.legendData,
          },
          series: [
            {
              name: "来源渠道",
              type: "pie",
              roseType: "radius",
              radius: [15, 120],
              center: ["50%", "50%"],
              data: response.data.seriesData,
              animationEasing: "cubicInOut",
              animationDuration: 2600,
            },
          ],
        });
      });
    },
  },
};
</script>
